<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">
      // 1.定义App根组件
      class App extends React.Component {
        constructor() {
          super(); //继承了就要调用super
          this.state = {
            //数据固定放在state中
            message: "Hello World",
            name: ["abc", "def"],
            aaa: undefined,
            bbb: null,
            ccc: true,

            friden: { name: "kone" },
            firstName: "kobe",
            lastName: "bryant",

            age: 20,

            movies: ["《盗梦空间》", "《星际穿越》", "《千与千寻》"],
          };
        }

        render() {
          // 1.插入标识符
          const { message, name } = this.state;
          const { aaa, bbb, ccc } = this.state;
          const { friden } = this.state;
          //2.对内容进行运算后显示（插入表达式）
          const { firstName, lastName } = this.state;
          const fullName = firstName + " " + lastName;
          const { age } = this.state;
          const ageText = age > 18 ? "成年人" : "未成年人";

          const liEls = this.state.movies.map((movie) => (
            <li key={movie}>{movie}</li>
          ));
          // 3.返回jsx的内容
          return (
            <div>
              {/* 1.Number/String/Array直接显示出来 */}
              <h2>{message}</h2>
              <h2>{name}</h2>
              {/* 2.undefined/null/true 不能显示，不报错。想显示要先转字符串*/}
              <h2>{aaa}</h2>
              <h2>{bbb}</h2>
              <h2>{ccc}</h2>
              {/* 3.Object类型不能作为子元素进行显示,里面的属性可以显示 */}
              <h2>{Object.keys(friden)[0]}</h2>
              {/*4.可以插入对应的表达式*/}
              <h2>{10 + 20}</h2>
              <h2>{firstName + " " + lastName}</h2>
              <h2>{fullName}</h2>
              {/* 5.插入三元运算符 */}
              <h2>{ageText}</h2>
              <h2>{age > 18 ? "成年人" : "未成年人"}</h2>
              {/* 6.可以调用方法获取结果 */}
              <ul>{liEls}</ul>
              <ul>
                {this.state.movies.map((movie) => (
                  <li key={movie}>{movie}</li>
                ))}
              </ul>
              // {/*这里按钮点击会报错，因为this指向不对，需要绑定this*/}
              {/*如果按钮调用方法时，方法后面加了()，那么this就是App的实例,没有加就是underfined*/}
              <ul>{this.getMovieEls()}</ul>
              <button onClick={this.getMovieEls}>-1</button>
            </div>
          );
        }

        getMovieEls() {
          console.log(this);

          const liEls = this.state.movies.map((movie) => (
            <li key={movie}>{movie}</li>
          ));
          return liEls;
        }
      }

      // 1.创建root并且渲染App组件
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render(<App />);
    </script>
  </body>
</html>
